<template>
  <view class="tabBarContainer">
    <view v-for="(item,index) in tabBarList" :key="item.key" @tap="changeItem(item,index)" class="barBox">
      <image :src="(selectedIndex == index&&item.selectedIconPath)?item.selectedIconPath:item.iconPath" :class=" item.isMidButton
        ?'midButtonIconStyle':'iconStyle'"></image>
        <view class="title">{{selectedIndex+','+index}} </view>
      <!-- <view :class="selectedIndex == index?'selectedTtitle':'title'">{{item.text}}</view> -->
    </view>


  </view>
</template>
<script>
  const util = require("@/utils/util.js");
  const api = require("@/utils/api.js");
  const app = getApp();
  export default {
    name: 'tabBar',
    data() {
      return {
        phone: '',
        selectedIndex: 0,
        tabBarList: [
          {
            "pagePath": "/pages/index/index",
            "iconPath": "../../static/images/ic_menu_choice_nor.png",
            "selectedIconPath": "../../static/images/ic_menu_choice_pressed.png",
            "text": "首页",
            "key":0
          },
          {
            "pagePath": "/pages/cookZone/cookZone",
            "iconPath": "../../static/images/ai_nor.png",
            "selectedIconPath": "../../static/images/ai_pre.png",
            "text": "aa",
            "key":1
          },
          {
            "iconPath": "../../static/images/vertify.png",
            "isMidButton": true,
            "key":2
          },
          {
            "pagePath": "/pages/mall/mall",
            "iconPath": "../../static/images/mall_nor.png",
            "selectedIconPath": "../../static/images/mall_pre.png",
            "text": "aa",
            "key":3
          },
          {
            "pagePath": "/pages/myInfo/myInfo",
            "iconPath": "../../static/images/ic_menu_me_nor.png",
            "selectedIconPath": "../../static/images/ic_menu_me_pressed.png",
            "text": "我的",
            "key":4
          }
        ],

      };
    },
    props: {
      currentPage: null,
      iconSrc: null,
      tapEvent: null,
      propStyles: {
        iconSrc: '',
        bgColor: '',
        txtColor: '',
        bgSrc: '',
        bgSrc1: '',
        zhanweiColor: ''
      }
    },
    methods: {
      changeItem(item, index) {
        this.phone = uni.getStorageSync("mobile")
    
        this.selectedIndex = index
        console.log('changeItem~~', index, this.selectedIndex);
        if (index == 0) {
          uni.switchTab({
            url: item.pagePath
          });
        } else if (index == 2) {
          this.scan();
        } else {
          console.log('4444~', item.pagePath);
          uni.switchTab({
            url: item.pagePath
          });

          // if (!this.phone) {

          //   uni.navigateTo({
          //     url: `/page_login/login`,
          //   })
          //   return
          // } else {
          //   uni.switchTab({
          //     url: item.pagePath
          //   });
          // }
        }

        // uni.switchTab({
        //   url: '/pages/index/index',

        // })
      },
    
      goBack() {
        uni.navigateBack()
      },
      scan() {
        let that = this;
        // 调起条码扫描
        uni.scanCode({
          onlyFromCamera: true, // 是否只能从相机扫码，不允许从相册选择图片
          //scanType: ['qrCode','barCode'], // 扫码类型 qrCode二维码
          scanType: ['qrCode', 'barCode'],
          autoZoom: false, 	  // 是否启用自动放大，默认启用
          success: function (res) {
            console.log(`扫码结果：${JSON.stringify(res, null, 2)}`);
            that.parseQRCode(res);
          },
          fail: function (err) {
            console.log(`错误：${err}`);
          },
          complete: function (data) {
            console.log('complete！');
          }
        });
      },
      // 解析二维码，处理业务
      parseQRCode(data) {
        uni.vibrateShort();					// 震动提示
        //uni.showToast({title: data.result})	// 弹出提示
        // 扫码结果 判断是条形码还是 二级节点 https://mssb.widelink.top  https://wenwu.widelink.net
        let that = this;
        let code = data.result;
        console.log("--->" + code.indexOf('https://mssb.widelink.top'));
        if (data.scanType == 'QR_CODE') {
          if (code.indexOf('https://mssb.widelink.top') != -1 || code.indexOf('https://wenwu.widelink.net') != -1) {
            let handle = that.getParameterByName(code, 'handle');
            uni.navigateTo({
              url: '/page_historyDetail/historyDetail?handle=' + handle
            });
            console.log("code:" + code);
            console.log("handle:" + that.getParameterByName(code, 'handle'));
          }
        } else {
          /*
          uni.navigateTo({
              url: '/page_code69/code69?handle='+code
          });
          */
          that.request69(api.selectCulProductInfoByCode69 + "/" + code, code);
        }
      },
      request69(url, _code) {
        let that = this;
        util
          .request(
            url,
            {},
            "GET",
            "application/json"
            , true, true
          )
          .then((res) => {
            if (res.code == 200) {
              let code69Length = res.data.data.length;
              if (code69Length == 1) {
                let sj = res.data.data[0];
                console.log("------>sj:" + JSON.stringify(sj));
                uni.navigateTo({
                  url: '/page_historyDetail/historyDetail?handle=' + sj.handle
                });

              } else {
                uni.navigateTo({
                  url: '/page_code69/code69?handle=' + _code
                });
              }

            } else {
              util.toast("查询失败");
            }
          })
          .catch((err) => {
            console.log("err", err);
          });
      },
      getParameterByName(url, name) {
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
          results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
      }


    },

    created() {
      //获取手机系统信息
      const info = uni.getSystemInfoSync();
      //设置状态栏高度
      this.statusBarHeight = info.statusBarHeight;
      this.windowWidth = info.windowWidth;
      // h5 app mp-alipay没有胶囊按钮
      // #ifndef H5 || APP-PLUS || MP-ALIPAY
      // 获取胶囊的位置
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      // (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
      this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
        .statusBarHeight)
      this.windowWidth = menuButtonInfo.left
      // #endif
    },
    onLoad: function () {
      uni.$on('login', (usnerinfo) => {
        this.phone = uni.getStorageSync("mobile")
      })

      console.log('昵称~~11~tabbar~onLoad', this.phone);
    },
    mounted() {
      // console.log('组件Mounted~~');
      // this.selectedIndex = this.currentPage
      // console.log('mounted~~~~', this.selectedIndex);
    },
    onShow() {
      // this.selectedIndex = this.currentPage
    },
    onUnload() {
      // 移除监听事件  
      uni.$off('login');
    },
  };

</script>

<style lang="scss" scoped>
  .tabBarContainer {
    box-sizing: border-box;
    position: fixed;
    bottom: 0rpx;
    left: 0rpx;
    width: 750rpx;
    height: 172rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    box-shadow: 0px -5px 20px 0px rgba(0, 0, 0, 0.15);
    border-radius: 68rpx 68rpx 0px 0px;

    .barBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 88rpx;

      .midButtonIconStyle {
        width: 100rpx;
        height: 102rpx;
        /* position: absolute;
        top: -65rpx; */
      }

      .iconStyle {
        width: 52rpx;
        height: 54rpx;
      }

      .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        color: #ABABAB;
      }

      .selectedTtitle {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        color: #343434;
      }
    }

  }
</style>